<template>
	<!-- 排行榜列表页 -->
 <transition name="slide">
 	<music-list :rank="rank" :title="title" :bg-image="bgImage" :songs="songs"></music-list>
 </transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import {ERR_OK} from 'api/config'
import {getMusicList} from 'api/rank'
import {createSong} from 'common/js/song'
import {mapGetters,mapMutations} from 'vuex'
export default {
  name: 'toplist',
	data() {
		return {
			songs: [],
			rank: true
		}
	},
	created() {
		this._getMusicList()
	},
	computed: {
		title() {
			return this.topList.topTitle
		},
		bgImage() {
			if (this.songs.length) {
				return this.songs[0].image
			}
			return ''
		},
		...mapGetters([
			'topList'
		])
	},
	methods:{
	_getMusicList() {
		if (!this.topList.id) {
			this.$router.push('/rank')
			return
		}
		getMusicList(this.topList.id).then((res) => {//歌曲详情信息
			if (res.code === ERR_OK) {//res.songlist 大于0
				this.songs = this._normalizeSongs(res.songlist)
			}
		}) 
	}, 
	_normalizeSongs(list) {//提纯数据
			let ret = []
			list.forEach((item) => {
				const musicData = item.data
				if (musicData.songid && musicData.albummid) {
					ret.push(createSong(musicData))
				}
			})
			ret.forEach((item) =>{//增加一个属性
				if(!item.pic){item.pic=item.image}
			})
			return ret
		}
	},
	components: {
		MusicList,
	}
}
</script>

<style lang="scss" scoped >
  .slide-enter-active, .slide-leave-active{transition: all 0.3s ease;}
  .slide-enter, .slide-leave-to{transform: translate3d(100%, 0, 0);}
</style>